<template>
  <div class=" publicBox" id="couponNewbuild">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom" :rules="rules" label-width="160px" label-position="left">
<el-row>
     <div class="pubPageTagP">
               <p>优惠卷管理/新建</p>
     </div>
</el-row>

<el-row>
     <div class="pubPageTagP page_text">
               <p>基本信息</p>
     </div>
</el-row>

<el-row>
         <el-form-item label="优惠卷名称" prop="name">
                 <el-input class="pubSerIpt" v-model="ruleForm.name"  placeholder="请输入姓名"></el-input>
       </el-form-item>
</el-row>

<el-row>
    <el-form-item label="优惠券类型" rop="resource">
        <el-radio-group v-model="ruleForm.resource">
            <el-radio label="折扣券"></el-radio>
            <el-radio label="折扣券"></el-radio>
        </el-radio-group>       
    </el-form-item>
</el-row>

<el-row>
         <el-form-item label="发放数量" prop="num">
                 <el-input class="pubIpt200" v-model="ruleForm.num"  placeholder="请输入姓名"></el-input>
                 <span>份</span>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="优惠金额" prop="money">
                 <el-input class="pubIpt200" v-model="ruleForm.money"  placeholder="请输入姓名"></el-input>
                 <span>元</span>
       </el-form-item>
</el-row>

<el-row>
     <div class="pubPageTagP page_text">
               <p>规则信息</p>
     </div>
</el-row>

<el-row>
    <el-form-item label="有效期" prop="time">
        <el-radio-group v-model="ruleForm.time">
            <el-radio label="固定日期"></el-radio>  
        </el-radio-group>   
            <el-date-picker
                v-model="ruleForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>    
    </el-form-item>
</el-row>

<el-row>
    <el-form-item label="" prop="timer">
        <el-radio-group v-model="ruleForm.time">
            <el-radio label="自领取之日起"></el-radio>
        </el-radio-group> 
        <el-input class="pubIpt50" v-model="ruleForm.money"  placeholder=""></el-input>
        <span>内有效</span>
    </el-form-item>
</el-row>

<el-row>
    <el-form-item label="品类条件" prop="times">
        <el-radio-group v-model="ruleForm.times">
            <el-radio label="无限制" ></el-radio>
            <el-radio label="" ></el-radio>
        </el-radio-group> 
       <el-select v-model="ruleForm.pid" filterable placeholder="洗衣机" class="pubSlt200">
                       <el-option
                         v-for="item in RootOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                   </el-select>
    </el-form-item>
</el-row>

<el-row>
    <el-form-item label="订单条件" prop="timers">
        <el-radio-group v-model="ruleForm.timers">
            <el-radio label="无限制"></el-radio>
            <el-radio label="订单金额满"></el-radio>
        </el-radio-group> 
        <el-input class="pubIpt50" v-model="ruleForm.money"  placeholder=""></el-input>
        <span>元可用</span>
    </el-form-item>
</el-row>

<el-row>
    <el-form-item label="用户条件" prop="timerse">
        <el-radio-group v-model="ruleForm.timerse">
            <el-radio label="无限制"></el-radio>
            <el-radio label=""></el-radio>
        </el-radio-group> 
       <el-select v-model="ruleForm.pid" filterable placeholder="新用户" class="pubSlt200">
                       <el-option
                         v-for="item in RootOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                   </el-select>
    </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnGree" type="primary" @click="submitForm">提交</el-button>
                         <el-button class="pubBtnGray" @click="$canCleFn"  type="primary">取消</el-button>
       </el-form-item>
</el-row>

</el-form>
  </div>
</template>

<script>

export default {
  components: {


  },
  data() {
    return {
    RootOptions: [],
        ruleForm:{
            name:"",
            resource:"",
            num:"",
            money:"",
            // one:'',
            // two:'',
            timer:'',
            value1:""
        },
        rules: {
          name: [
            {required: true, message: '请输入优惠券名称', trigger: 'blur' }
          ],
          resource: [
            {required: true, message: '请选择折扣类型', trigger: 'blur' }
          ],
          num: [
            {required: true, message: '请输入发放数量', trigger: 'blur' }
          ],
          money: [
            {required: true, message: '请输入优惠金额', trigger: 'blur' }
          ],
        }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                    this.addAccount()
            } else {
              return false;
            }
        });
       }

  },
  created() {


  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.page_text{
    border-bottom: 1px dashed #000000;
    margin: 0 0 15px 0;
}

</style>